<template>
  <c-form-dialog
    ref="form"
    :title="title"
    :visible.sync="innerVisible"
    :form-items="formItems"
    :form-data="formData"
    :table-name="tableName"
    :table-id="formData.credit_agency_capital_id"
    @dismiss="beforeClose"
    @success="handleSuccess"
  ></c-form-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { enumCaptialAgencyType, enumCaptialAccountType } from '@/credit/plugins/enum'

import SelectAccessAgency from '@/credit/components/select/SelectAccessAgency'
import SelectAddress from '@/components/select/SelectAddress'

export default {
  components: {},
  props: {
    visible: Boolean,
    tableId: String,
    title: {
      type: String,
      default: '新增主体',
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      innerVisible: false,
      tableName: 'credit_agency_capital',
      formItems: [
        {
          tag: 'input',
          itemAttrs: {
            label: 'id',
          },
          attrs: {
            key: 'credit_agency_capital_id',
            value: '',
            disabled: true,
            class: 'form-control-ml',
          },
          ifRender: false,
          ifShow: false,
          ifDrop: true,
        },
        {
          tag: 'radio-group',
          itemAttrs: {
            label: '机构类型',
            rules: [{ required: true, message: '请选择机构类型', trigger: 'change' }],
          },
          attrs: {
            clearable: false,
            key: 'agency_type',
            value: '6',
            options: enumCaptialAgencyType,
          },
          listeners: {
            change: v => {
              const form = this.$refs.form
              form.setAttrs('agency_id', { agencyType: +v, value: '' })
              form.setAttrs('agency_name', { value: '' })
              form.setAttrs('address', { value: '' })
              form.setAttrs('address_code', { value: '' })
              form.setAttrs('address_detail', { value: '' })
              form.setAttrs('contact', { value: '' })
              form.setAttrs('mobile_no', { value: '' })
            },
          },
          getAttrs: row => ({ disabled: !!row.credit_agency_capital_id }),
        },
        {
          tag: SelectAccessAgency,
          itemAttrs: {
            label: '合作机构',
            rules: [{ required: true, message: '请选择合作机构', trigger: 'change' }],
          },
          attrs: {
            key: 'agency_id',
            value: '',
            agencyType: 6,
            placeholder: '请选择合作机构',
            class: 'form-control-ml',
          },
          listeners: {
            change: (v, row) => {
              const form = this.$refs.form
              form.setAttrs('agency_name', { value: row.agency_name })
              form.setAttrs('address', { value: row.address })
              form.setAttrs('address_code', { value: row.address_code })
              form.setAttrs('address_detail', { value: row.address_detail })
              form.setAttrs('contact', { value: row.contact })
              form.setAttrs('mobile_no', { value: row.mobile_no })
            },
          },
          ifRender: row => !row.credit_agency_capital_id,
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '合作机构',
          },
          attrs: {
            key: 'agency_name',
            value: '',
            placeholder: '请填写合作机构',
            disabled: true,
            class: 'form-control-ml',
          },
          ifShow: row => !!row.credit_agency_capital_id,
          getAttrs: row => ({ disabled: !row.credit_agency_capital_id }),
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '地址',
          },
          attrs: {
            key: 'address',
            value: '',
            placeholder: '请填写地址',
            disabled: true,
            class: 'form-control-ml',
          },
          ifDrop: true,
          ifShow: row => !row.credit_agency_capital_id,
        },
        {
          tag: SelectAddress,
          itemAttrs: {
            label: '地址',
          },
          attrs: { key: 'address_code', value: '', disabled: true, class: 'form-control-ml' },
          ifShow: row => !!row.credit_agency_capital_id,
          getAttrs: row => ({ disabled: !row.credit_agency_capital_id }),
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '地址详情',
          },
          attrs: { key: 'address_detail', value: '', disabled: true, class: 'form-control-ml' },
          ifShow: row => !!row.credit_agency_capital_id,
          getAttrs: row => ({ disabled: !row.credit_agency_capital_id }),
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '联系人',
          },
          attrs: {
            key: 'contact',
            value: '',
            placeholder: '请填写联系人',
            disabled: true,
            class: 'form-control-ml',
          },
          getAttrs: row => ({ disabled: !row.credit_agency_capital_id }),
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '联系电话',
          },
          attrs: {
            key: 'mobile_no',
            value: '',
            placeholder: '请填写联系电话',
            disabled: true,
            class: 'form-control-ml',
          },
          getAttrs: row => ({ disabled: !row.credit_agency_capital_id }),
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '银行账号',
            rules: [{ required: true, message: '请填写银行账号', trigger: 'change' }],
          },
          attrs: { key: 'bank_account', value: '', placeholder: '请填写银行账号' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '开户行',
            rules: [{ required: true, message: '请填写开户行', trigger: 'change' }],
          },
          attrs: { key: 'bank_name', value: '', placeholder: '请填写开户行' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '开户行地址',
            rules: [{ required: true, message: '请填写开户行地址', trigger: 'change' }],
          },
          attrs: { key: 'bank_address', value: '', placeholder: '请填写开户行地址' },
        },
        {
          tag: 'select',
          itemAttrs: {
            label: '账户类型',
            rules: [{ required: true, message: '请选择账户类型', trigger: 'change' }],
          },
          attrs: {
            key: 'account_type',
            value: '',
            placeholder: '请选择账户类型',
            options: enumCaptialAccountType,
          },
        },
        {
          tag: 'number',
          itemAttrs: {
            label: '初始金额',
            rules: [{ required: true, message: '请填写初始金额', trigger: 'change' }],
          },
          attrs: { key: 'init_funds', value: '', placeholder: '请填写初始金额', min: 0 },
          tagSlots: [{ name: 'append', slot: '万元' }],
          getAttrs: row => ({ disabled: +row.is_registered === 1 }),
        },
        {
          tag: 'number',
          itemAttrs: {
            label: '当前金额',
            rules: [{ required: true, message: '请填写当前金额', trigger: 'change' }],
          },
          attrs: { key: 'current_funds', value: '', placeholder: '请填写当前金额', min: 0 },
          tagSlots: [{ name: 'append', slot: '万元' }],
          getAttrs: row => ({ disabled: +row.is_registered === 1 }),
        },
        {
          tag: 'input',
          attrs: { key: 'is_registered', value: '' },
          ifRender: () => false,
        },
        {
          tag: 'input',
          itemAttrs: { label: 'service_id' },
          attrs: { key: 'service_id', value: '' },
          getValue: () => this.clientId,
          ifShow: false,
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {
    visible(val) {
      this.innerVisible = val
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handleSuccess() {
      this.beforeClose()
      this.$emit('success', {})
    },
  },
}
</script>

<style lang="scss" scoped></style>
